import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    StyleSheet
} from 'react-native';

import parseUrl from './../../utils/parseUrl';

import {
    MessageItem
} from "./types";

interface Props {
    data: MessageItem,
    mySelf: boolean
}

import {
    Press,
    Viewer,
    FastImage
} from './../../components';

class MsgImg extends PureComponent<Props> {
    public viewer:any=null;

    static defaultProps = {
        data: {},
        mySelf: false
    }

    get Data() {
        const {
            data
        } = this.props;
        return data;
    }

    get url() {
        const {
            mediaPath
        } = this.Data;
        return parseUrl(mediaPath)
    }

    public onReview = () => {
        const {
            mediaPath
        } = this.Data;
        this.viewer.open([mediaPath])
    }

    render() {
        return (
            <Fragment>
                <Press onPress={this.onReview}>
                    <FastImage
                        url={this.url}
                        style={styles.container}
                    />
                </Press>
                <Viewer ref={e=>this.viewer=e}/>
            </Fragment>
        )
    }
}

export default MsgImg;

const styles = StyleSheet.create({
    container: {
        width:120,
        height:180,
        borderRadius:6
    }
}) as any;